<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;">

        <el-form-item label="名称" prop="user">
          <el-input
            v-model="queryForm.name"
            style="width: 200px;"/>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleFormSubmit">
            <d2-icon name="search"/>
            查询
          </el-button>
        </el-form-item>

      </el-form>
    </template>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"
      :loading="loading"
      :pagination="pagination"
      @pagination-current-change="paginationCurrentChange"
      selection-row
      @selection-change="handleSelectionChange"
      :form-options="formOptions"
      :rowHandle="rowHandle"
      @dialog-open="handleDialogOpen"
      @dialog-cancel="handleDialogCancel"
      add-title="新增角色"
      :add-template="addTemplate"
      :add-rules="addRules"
      @row-add="handleRowAdd"
      edit-title="修改角色"
      :edit-template="addTemplate"
      :edit-rules="addRules"
      @row-edit="handleRowEdit"
      @row-remove="handleRowRemove"
    >
      <el-button slot="header" style="margin-bottom: 5px" @click="addRow" size="mini">新增</el-button>
      <el-button slot="header" style="margin-bottom: 5px" @click="deleteRows" size="mini">删除</el-button>
    </d2-crud>
  </d2-container>
</template>

<script>
  import MyAreaSelect from '@/components/my-area-select'
  import MyPermissionSelect from '@/components/my-permission-select'

  export default {
    name: 'role',
    data() {
      return {
        queryForm: {
          name: '',
        },
        loading: false,
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        columns: [
          {
            "title": "序号",
            "key": "serialNum",
            sortable: true
          },
          {
            "title": "名称",
            "key": "name",
            sortable: true
          },
          {
            "title": "是否内置",
            "key": "isSystem",
          },
          {
            "title": "描述",
            "key": "description",
          },
        ],
        data: [],
        addTemplate: {
          name: {
            title: '角色名称',
            value: ''
          },
          description: {
            title: '角色描述',
            value: ''
          },
          areaIds: {
            title: '管辖区域',
            value: [],
            component: {
              name: MyAreaSelect,
            }
          },
          equipmentmodelIds: {
            title: '管辖设备',
            value: [],
            component: {
              name: 'el-select',
              multiple: true,
              options: []
            }
          },
          permissionIds: {
            title: '菜单权限',
            value: [],
            component: {
              name: MyPermissionSelect,
            }
          }
        },
        formOptions: {
          labelWidth: '80px',
          labelPosition: 'left',
          saveLoading: false
        },
        addRules: {
          name: [ { required: true, message: '请输入角色名称', trigger: 'blur' } ],
          areaIds: [ { required: true, message: '请选择管辖区域', trigger: 'change' } ],
          equipmentmodelIds: [ { required: true, message: '请选择管辖设备', trigger: 'change' } ],
          permissionIds: [ { required: true, message: '请选择菜单权限', trigger: 'change' } ],
        },
        rowHandle: {
          columnHeader: '操作',
          edit: {
            text: '编辑',
          },
          remove: {
            text: '删除',
          }
        },
        selectionRow: []
      }
    },
    mounted() {
      this.initData()
      this.fetchData()
    },
    methods: {
      initData() {
        this.$api.admin_equipmentmodel_getList().then(res=>{
          let options = res.map(i=>{
            return {
              value: i.id,
              label: i.name,
            }
          })
          this.addTemplate.equipmentmodelIds.component.options = options
        })
      },
      paginationCurrentChange(currentPage) {
        this.pagination.currentPage = currentPage
        this.fetchData()
      },
      fetchData() {
        this.loading = true
        this.$api.admin_role_getPageList({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          ...this.queryForm,
        }).then(res => {
          this.data = res.data
          this.pagination.total = res.total
        }).catch(err => {
          console.log('err', err)
        }).finally(() => {
          this.loading = false
        })
      },
      handleFormSubmit() {
        this.pagination.currentPage = 1;
        this.fetchData()
      },
      addRow() {
        this.$refs.d2Crud.showDialog({
          mode: 'add'
        })
      },
      handleRowAdd(row, done) {
        this.formOptions.saveLoading = true
        this.$api.admin_role_add(row).then(res=>{
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.fetchData()
          done()
        }).finally(()=>{
          this.formOptions.saveLoading = false
        })
      },
      handleDialogOpen({ mode, row, index }) {

        if (mode === 'edit') {
          this.$api.admin_role_get({id: row.id}).then(res=>{
            this.$refs.d2Crud.setFormData(res)
          })
        }
      },
      handleDialogCancel (done) {
        done()
      },
      handleRowEdit({ index, row }, done) {
        this.formOptions.saveLoading = true
        this.$api.admin_role_update(row).then(res=>{
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.fetchData()
          done()
        }).finally(()=>{
          this.formOptions.saveLoading = false
        })
      },
      handleRowRemove({ index, row }, done) {
        this.$api.admin_role_delete([row.id]).then(res=>{
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.fetchData()
          done()
        })
      },
      handleSelectionChange(selection) {
        console.log(selection)
        this.selectionRow = selection;
      },
      deleteRows() {
        this.$confirm("确定删除吗?", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error"
        })
        .then(() => {
          this.$api.admin_role_delete(this.selectionRow.map(item => item.id)).then(res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.fetchData()
          });
        })

      }
    }
  }
</script>
